<template>
    <div class="com-cnt">
        <h3 class="tit1"></h3>
        <div class="boxDemo">
            <!-- <p>1、请认真阅读我们的代理人协议，并同意签署协议；<br> 2、充值{{getArry.amount}}元保证金，立即成为代理人。
            </p> -->
            <ul class="clearfix">
                <li class="fl" @click="getArry.amount=amountt" :class="{'active':getArry.amount==amountt}">
                    <p class="money">
                        <span>{{amountt}}</span>
                        <span>元</span>
                    </p>
                </li>
                <!-- <li class="fl" @click="getArry.amount=amountts" :class="{'active':getArry.amount==amountts}">
                    <p class="slect">可选代理人礼包</p>
                    <p class="money">
                        <span>{{amountts}}</span>
                        <span>元</span>
                    </p>
                </li> -->
            </ul>
            <div class="price clearfix">
                <p class="fl">支付方式</p>
                <p class="mmms fr" @click="direct('ckhelp')">加盟费咨询</p>
            </div>
            <div class="alertBox" @click.stop>

                <div class="heights">
                    <!-- <p @click="getArry.pay_type='wx'">
                        <button class="wechat"><input name="pay" type="radio" checked="getArry.pay_type='wx'"></button>
                    </p> -->
                    <p @click="getArry.pay_type='hxzf'">
                        <button class="hxzf"><input name="pay" type="radio" checked="getArry.pay_type='hxzf'"></button>
                    </p>
                    <p @click="getArry.pay_type='zfb'">
                        <button class="zfb"><input name="pay" type="radio"></button>
                    </p>
                </div>
                <!-- <div class="agKeepShow" @click="direct('selectToShow')">代理人保证金说明</div> -->
            </div>
            <div class="btn" @click="gotoRecords">确认支付</div>
        </div>
        <!-- <div class="mask" :class="{hidemask:hidemaskFlag}" @click="hidemaskFlag=true">
            <div class="alertBox" @click.stop>
                <p>支付代理保证金</p>
                <div class="price">
                    <div class="showPrice">{{getArry.amount}}元</div>
                    <div class="submitPrice" @click="gotoRecords">确定</div>
                </div>
                <div class="heights">
                    <span @click="getArry.pay_type='wx'">
                        <button class="wechat"><input name="pay" type="radio" checked="getArry.pay_type='wx'"></button>
                    </span>
                    <span @click="getArry.pay_type='hxzf'">
                        <button class="hxzf"><input name="pay" type="radio"></button>
                    </span>
                    <span @click="getArry.pay_type='zfb'">
                        <button class="zfb"><input name="pay" type="radio"></button>
                    </span>
                </div>
                <div class="agKeepShow" @click="direct('selectToShow')">代理人保证金说明</div>
            </div>
        </div> -->
        <!-- <h3 class="tit1">现场签约</h3>
        <div class="boxDemo">
            <p>请到我司签署线下协议合同，保证金方面可咨询我们线下服务人员。</p>
            <div class="btn" @click="hideMask2=false">提交申请</div>
        </div>
        <div class="mask2" v-if="hideMask2==false">
            <div class="showAddress">
                <p>客服电话：400-666-6688</p>
                <p>工作时间：9:00～18:00</p>
                <p>我司地址：浦东新区上南路3886号 一楼</p>
                <div class="closeMask2" @click="hideMask2=true">
                    确认
                </div>
            </div>
        </div> -->
    </div>
</template>

<script>
import axios from 'axios'
import http from "@/assets/js/axios"
import https from "@/assets/js/axiosh"
import Qs from 'qs'
import { maskTips, maskCallback } from '@/assets/js/dom'
import $ from 'jquery'
import { domain } from '@/assets/js/config'
export default {
    data() {
        return {
            userToken: '',
            agentId: '',
            hidemaskFlag: true,
            amountt: '',
            amountts: '',
            getArry: {
                pay_type: 'hxzf',
                amount: ''
            },
            userToken: localStorage.getItem('token'),
            hideMask2: true
        }
    },
    components: {

    },
    mounted() {
        // this.amountts=this.getArry.amount

        let userToken = localStorage.getItem("token") || ''
        this.userToken = userToken
        if (!this.userToken) {
            this.$router.push('/index')
        }
        let agentId = sessionStorage.getItem("agentId") || ''
        this.agentId = agentId
        this.getReasons();
    },
    methods: {

        direct: function (val) {
            this.$router.push({ path: '/' + val });
        },
        // 用户信息
        getReasons: async function () {
            const res = await https.post('f/agent/home/getPayInfo?token=' + this.agentId)
            // console.log(res);
            if (res.data.code == 100) {
                this.amountt = res.data.data.amount[0]
                // this.amountts = res.data.data.amount[1]
                this.getArry.amount = this.amountt
            }
        },
        //assetsType = 3
        // 充值
        gotoRecords: function () {
            //let statu = localStorage.getItem("uthenticationStatus") || ''
            if (this.getArry.pay_type == 'wx') {
                var userAgent = navigator.userAgent.toLowerCase();
                if (/micromessenger/gi.test(userAgent)) {
                    window.open(domain + "/xshk/f/assets/goWxPay?token=" + this.userToken + "&amount=" + this.getArry.amount, '_parent')
                } else {
                    $.ajax({
                        // url: domain + "/xshk/f/assets/wxRecharge?token=" + this.userToken + "&amount=" + this.getArry.amount + "&AgentId=" + this.agentId,
                        url: domain + "/xshk/f/assets/wxRecharge?token=" + this.userToken + "&amount=" + this.getArry.amount,
                        data: { assetsType: 3 },
                        type: "get",
                        dataType: "json",
                        xhrFields: { withCredentials: true },
                        crossDomain: true,
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded',
                        },
                        success: function (data) {
                            if (data) {
                                window.open(data.data.mwebUrl, '_parent')
                            } else {
                                console.log("数据为空");
                            }
                        },
                        error: function () {
                            console.log("失败");
                        }

                    })
                }
            } else if (this.getArry.pay_type == 'hxzf') {
                $.ajax({
                    // url: domain + "/xshk/f/assets/recharge?token=" + this.userToken + "&amount=" + this.getArry.amount + "&pay_type=" + this.getArry.pay_type + "&AgentId=" + this.agentId,
                    url: domain + "/xshk/f/assets/recharge?token=" + this.userToken + "&amount=" + this.getArry.amount + "&pay_type=" + this.getArry.pay_type,
                    data: { assetsType: 3 },
                    type: "post",
                    dataType: "json",
                    xhrFields: { withCredentials: true },
                    crossDomain: true,
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                        // 'Referer':'http：//www.xukanghui.com'
                    },
                    success: function (data) {
                        // console.log(data);
                        if (data.code == 0) {
                            $("#form").attr("action", data.data.ipsUrl);
                            $("#pGateWayReq").val(data.data.pGateWayReq);
                            document.getElementById("form").submit();
                        } else {
                            maskTips({ id: "too-littlecash-2", txt: data.message })
                        }
                    },
                    error: function () {
                        console.log("失败");
                    }

                })
            } else if (this.getArry.pay_type == 'zfb') {
                this.$router.push({ path: '/rechargeMange', query: { 'amount': this.getArry.amount, 'userToken': this.userToken, 'assetsType': 3 } })
            }
            //}
        },
    }
}
</script>

<style lang='stylus' scoped>
.com-cnt {
    width: 100%;
    height: 80%;
    position: relative;
    z-index: 199;
    background: #ffffff;

    .tit1 {
        height: 45px;
        line-height: 45px;
        background: #F0F0F0;
        font-size: 18px;
        padding-left: 36px;
        position: relative;
    }

    .tit1:before {
        content: '';
        width: 4px;
        height: 16px;
        // background: #aad112;
        position: absolute;
        left: 20px;
        top: 15px;
    }

    .boxDemo {
        width: 100%;
        height: 191px;
        padding: 24px 20px 0 20px;
        font-size: 12px;

        // p {
        // line-height: 20px;
        // color: #ffffff;
        // background: #c3a368;
        // padding: 15px;
        // border-radius: 5px;
        // }
        ul {
            li {
                // margin: 5px;
                width: 50%;
                height: 90px;
                background-image: url('../../assets/imgs/agent/typeBgc2.png');
                background-size: 100% 100%;
                position: relative;

                .slect {
                    position: absolute;
                    top: 10px;
                    right: 10px;
                    font-size: 12px;
                    font-family: PingFangSC-Regular;
                    font-weight: 400;
                    color: rgba(247, 247, 247, 1);
                }

                .money {
                    position: absolute;
                    top: 40px;
                    left: 10px;

                    span:nth-child(1) {
                        font-size: 20px;
                        font-family: PingFangSC-Regular;
                        font-weight: 400;
                        color: rgba(247, 247, 247, 1);
                    }

                    span:nth-child(2) {
                        font-size: 12px;
                        font-family: PingFangSC-Regular;
                        font-weight: 400;
                        color: rgba(247, 247, 247, 1);
                    }
                }
            }

            li.active {
                background-image: url('../../assets/imgs/agent/typeBgc1.png');
            }
        }

        .price {
            margin-top: 29px;
            width: 100%;
            height: 40px;
            line-height: 40px;
            border-bottom: 1px solid #f0f0f0;

            p {
                font-size: 16px;
                font-family: SourceHanSansCN-Regular;
                font-weight: bold;
                color: rgba(51, 51, 51, 1);
            }

            .mmms {
                font-size: 12px;
                font-family: PingFangSC-Regular;
                font-weight: bold;
                color: rgba(153, 153, 153, 1);
            }
        }

        .btn {
            width: 337px;
            height: 53px;
            line-height: 53px;
            text-align: center;
            border: 1px solid #999;
            font-size: 16px;
            margin-top: 30px;
            border-radius: 5px;
        }
    }

    .mask2 {
        position: fixed;
        box-sizing: border-box;
        left: 0px;
        top: 0px;
        right: 0px;
        bottom: 0px;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.56);
        color: rgb(232, 232, 232);
        font-family: Menlo, Consolas, monospace;
        font-size: large;
        overflow: auto;
        z-index: 99;

        .showAddress {
            width: 256px;
            height: 164px;
            padding-top: 25px;
            background: #ffffff;
            font-family: DFPKanTingLiuW9;
            color: #000;
            font-size: 12px;
            position: absolute;
            top: 252px;
            left: 61px;

            p {
                height: 12px;
                line-height: 12px;
                text-align: center;
                margin-bottom: 15px;
            }

            .closeMask2 {
                width: 100%;
                height: 45px;
                text-align: center;
                line-height: 45px;
                font-size: 17px;
                color: #999999;
                border-top: 1px solid #DDDDDD;
                position: absolute;
                bottom: 0;
            }
        }
    }

    .mask {
        position: fixed;
        box-sizing: border-box;
        left: 0px;
        top: 0px;
        right: 0px;
        bottom: 0px;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.56);
        color: rgb(232, 232, 232);
        font-family: Menlo, Consolas, monospace;
        font-size: large;
        overflow: auto;
        z-index: 99;

        .alertBox {
            width: 100%;
            height: 272px;
            padding: 0 15px;
            position: absolute;
            bottom: 0;
            background: #fff;
            color: #000;

            .agKeepShow {
                color: #0089FD;
                font-size: 12px;
                margin-top: 19px;
                float: right;
                font-family: PingFangSC-Regular;
            }
        }
    }

    .hidemask {
        display: none;
    }
}

.heights {
    width: 100%;
    // height: 45px;
    box-sizing: border-box;
    margin-top: 40px;
    // border-bottom: 1px solid #f0f0f0;
}

.heights button {
    position: relative;
}

.heights p {
    height: 40px;
    line-height: 40px;
}

.heights button input {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 5px;
    left: -35px;
}

.heights .zfb {
    padding: 0;
    width: 1.8rem;
    height: 0.6rem;
    border: none;
    outline: none;
    background: url('../../assets/imgs/recharge/zfb.png') no-repeat;
    margin-left: 1rem;
    background-size: 100% 100%;
}

.heights p .wechat {
    padding: 0;
    width: 1.8rem;
    height: 0.6rem;
    border: none;
    outline: none;
    background: url('../../assets/imgs/recharge/wechat.png') no-repeat;
    margin-left: 1rem;
    background-size: 100% 100%;
}

.heights p .hxzf {
    padding: 0;
    width: 2.3rem;
    height: 0.6rem;
    border: none;
    outline: none;
    background: url('../../assets/imgs/recharge/hxzf.png') no-repeat;
    margin-left: 1rem;
    background-size: 100% 100%;
}
</style>
